
<template>
  <div class="flex flex-row gap-4 relative neo-card neo-border p-2">
    <!-- 内容容器 - 按钮和卡片同一行布局 -->
    <div class="w-full p-1 flex flex-row gap-4 h-full">
      <!-- 切换按钮容器 - 固定宽度，保持垂直排列 -->
      <div class="w-16 p-2 rounded-lg relative overflow-hidden flex-shrink-0 neo-card neo-border">
        <!-- 按钮容器内部装饰线 -->
        <div class="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-blue-500/30 to-transparent"></div>

        <div class="flex flex-col space-y-2 relative z-10">
          <button
              class="px-2 py-1 text-xs font-medium rounded-lg transition-colors duration-300 w-full border"
              :class="{
              'bg-blue-600 text-white shadow-[0_0_8px_rgba(59,130,246,0.5)] border-transparent': currentPeriod === 'today',
              'bg-white/5 text-blue-200 hover:bg-white/10 border-white/10': currentPeriod !== 'today'
            }"
              @click="currentPeriod = 'today'"
          >
            今日
          </button>
          <button
              class="px-2 py-1 text-xs font-medium rounded-lg transition-colors duration-300 w-full border"
              :class="{
              'bg-blue-600 text-white shadow-[0_0_8px_rgba(59,130,246,0.5)] border-transparent': currentPeriod === 'month',
              'bg-white/5 text-blue-200 hover:bg-white/10 border-white/10': currentPeriod !== 'month'
            }"
              @click="currentPeriod = 'month'"
          >
            本月
          </button>
        </div>
      </div>

      <!-- 卡片区域 - 占满剩余宽度，自动适应 -->
      <div class="flex-1 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
        <!-- 加载状态 -->
        <div v-if="loading" class="col-span-full text-center text-blue-300 flex items-center justify-center h-full">加载中...</div>
        <!-- 错误提示 -->
        <div v-else-if="error" class="col-span-full text-center text-red-400 flex items-center justify-center h-full">{{ error }}</div>
        <!-- 正常显示卡片 -->
        <div
            v-else
            v-for="(card, index) in updatedCards"
            :key="card.key"
            class="p-2.5 rounded-lg hover:shadow-[0_0_10px_rgba(59,130,246,0.15)] transition-shadow duration-300 relative overflow-hidden neo-card neo-border"
        >
          <!-- 卡片内部装饰线 -->
          <div class="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-blue-500/20 to-transparent"></div>

          <div class="flex items-center justify-between mb-1.5 relative z-10">
            <h3 class="text-xs text-blue-300 font-medium">{{ card.label }}</h3>
            <!-- 用不同颜色的小圆点替代图片 -->
            <div class="w-3 h-3 rounded-full" :class="card.dotColor"></div>
          </div>
          <p class="text-lg font-bold text-blue-100">{{ card.value }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      currentPeriod: 'today',
      ticketStatus: null,
      loading: true,
      error: null,
      refreshTimer: null,
      cards: [
        {
          label: '总工单数',
          key: 'total',
          dotColor: 'bg-blue-500', // 蓝色圆点
        },
        {
          label: '已完成',
          key: 'completed',
          dotColor: 'bg-purple-500', // 紫色圆点
        },
        {
          label: '待分配',
          key: 'allocate',
          dotColor: 'bg-yellow-500', // 黄色圆点
        },
        {
          label: '处理中',
          key: 'processing',
          dotColor: 'bg-green-500', // 绿色圆点
        },
        {
          label: '待验收',
          key: 'check',
          dotColor: 'bg-orange-500', // 橙色圆点
        },
        {
          label: '挂起',
          key: 'hang',
          dotColor: 'bg-red-500', // 红色圆点
        }
      ]
    }
  },
  created() {
    this.loadData()
  },
  mounted() {
    this.refreshTimer = setInterval(() => {
      this.loadData()
    }, 3000)
  },
  beforeUnmount() {
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
      this.refreshTimer = null
    }
  },
  computed: {
    updatedCards() {
      if (!this.ticketStatus) return [];

      const data = this.currentPeriod === 'today' ? this.ticketStatus.today : this.ticketStatus.month;
      return this.cards.map(card => {
        const value = data[card.key] !== undefined ? data[card.key] : 0;
        return {
          ...card,
          value
        };
      });
    }
  },
  methods: {
    async loadData() {
      try {
        const response = await axios.get('/api/Notice/GetTicketStatus');
        this.ticketStatus = response.data.data;
        this.error = null;
      } catch (error) {
        console.error('获取工单状态失败', error);
        this.error = '无法加载数据，请稍后再试';
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
/* 卡片悬停效果优化 */
.hover\:shadow-\[0_0_10px_rgba\(59\,130\,246\,0\.15\)\] {
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .grid-cols-6 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .w-16 {
    width: 18%;
  }
}

@media (max-width: 480px) {
  .flex-row {
    flex-direction: column;
  }
  .w-16 {
    width: 100%;
  }
  .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
